import { useEffect, useRef, useState } from 'react'
import './App.scss'
import avatar from './images/bozai.png'
import classname from 'classname'
import _ from 'lodash'
import { v4 as uuid } from 'uuid'
import dayjs from 'dayjs'
import axios from 'axios'
import CommentListItem from './components/CommentListItem.jsx'

/*const list = [
  {
    rpid: 3,
    user: {
      uid: '13258165',
      avatar: 'http://toutiao.itheima.net/resources/images/98.jpg',
      uname: '周杰伦',
    },
    content: '哎哟，不错哦',
    ctime: '10-18 08: 15',
    like: 126,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: 'http://toutiao.itheima.net/resources/images/98.jpg',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11: 29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar: avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09: 00',
    like: 66,
  },
]*/

// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}
// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

// 封装请求数据的Hook
function useGetCommentList() {
  useEffect(() => {
    async function getList() {
      const res = await axios.get('http://localhost:3004/list')
      // console.log(res)
      setCommentList(_.orderBy(res.data, ['like', 'desc']))
    }

    getList()
  }, [])

  // 渲染评论列表
  // 1. 使用useState维护list
  const [commentList, setCommentList] = useState([])

  return [commentList, setCommentList]
}

// 封装Item组件

const App = () => {
  const [commentList, setCommentList] = useGetCommentList()

  // 删除功能
  function deleteComment(currentRpid) {
    setCommentList(commentList.filter((item) => item.rpid !== currentRpid))
  }

  // tab切换功能
  // 1. 点击谁就把谁的type记录下来
  const [currentType, setCurrentType] = useState('hot')
  // 2. 通过记录的type和每一项遍历时的type做匹配 控制激活类名的显示
  const tabTypeChange = (newType) => {
    setCurrentType(newType)

    if (newType === 'hot') {
      setCommentList(_.orderBy(commentList, ['like'], 'desc'))
    } else {
      setCommentList(_.orderBy(commentList, ['ctime'], 'desc'))
    }
  }

  // 发表评论
  const [content, setContent] = useState('')

  function inputContent(event) {
    // console.log(event)
    setContent(event.target.value)
  }

  const textareaRef = useRef(null)

  function publishComment() {
    setCommentList([
      ...commentList,
      {
        rpid: uuid(),
        user,
        content,
        ctime: dayjs(new Date()).format('MM-DD hh:mm'),
        like: 0,
      },
    ])

    setContent('')
    console.log(textareaRef.current)
    textareaRef.current.blur()
  }

  return (
    <div className="app">
      {/* 导航 Tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {tabs.map((item) => (
              <span
                // className={`nav-item ${
                //   currentTabType === item.type ? 'active' : ''
                // }`}
                onClick={() => tabTypeChange(item.type)}
                className={classname('nav-item', {
                  active: currentType === item.type,
                })}
                key={item.type}
              >
                {item.text}
              </span>
            ))}

            {/* 高亮类名： active */}
          </li>
        </ul>
      </div>

      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
              value={content}
              onChange={inputContent}
              ref={textareaRef}
            />
            {/* 发布按钮 */}
            <div className="reply-box-send" onClick={publishComment}>
              <div className="send-text">发布</div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}

        <div className="reply-list">
          {/* 评论项  用commentList渲染*/}

          {commentList.map((commentListItem) => (
            <CommentListItem
              user={user}
              commentListItem={commentListItem}
              deleteComment={deleteComment}
            />
          ))}
        </div>
      </div>
    </div>
  )
}

export default App
